<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/struts-tags" prefix="s" %>


<script type="text/javascript">
    $(function(){
        $("#resultsTable").tablesorter({
            headers : {
                5 : {
                    sorter : false
                }
            },
            sortList : [ [ 1, 0 ] ]
        }).tablesorterPager({
            container : $("#pager")
        });
    });
</script>
<br/>
<table>
    <tr>
        <td>
            <img src="<s:url value="/img/icons/user1_view_big.png"/>"> 
        </td>
        <td>
            <span class="title">
               List Users
            </span>
        </td>
    </tr>
</table>
<br/><br/>

<table id="resultsTable" cellspacing="1" cellpadding="1" class="tablesorter" style="width:500px;" border="1">
    <thead>
        <tr>
            <th>UserId</th>
            <th>User Name</th>
            <th>Password</th>
            <th>Email</th>
            <th>Role</th>
            <th>&nbsp</th>
        </tr>
    </thead>
    <tbody>
        <s:iterator value="users">
            <tr>
                <td><s:property value="userId"/></td>
                <td><s:property value="username"/></td>
                <td><s:property value="password"/></td>
                <td><s:property value="email"/></td>
                <td><s:property value="role"/></td>
                <td>
                    <a href="<s:url namespace="/user" action="edit_%{userId}" />">
                        <img src="<s:url value="/img/icons/edit.png"/>" alt="Edit" border="0"/>
                    </a>
                    <a href="<s:url namespace="/user" action="delete_%{userId}" />">
                        <img src="<s:url value="/img/icons/delete.png"/>" alt="Delete" border="0"/>
                    </a>
                </td>
            </tr>
        </s:iterator>
    </tbody>
</table>

<div id="pager" class="pager" style="width:500px;text-align: center">
    <form>
        <img src="<s:url value="/img/icons/arrow_left_blue.png" />" class="first" style="vertical-align: middle; cursor: pointer;" alt="First page" />
        <img src="<s:url value="/img/icons/arrow_left_green.png" />" class="prev" style="vertical-align: middle; cursor: pointer;" alt="Previous page" />
        <span style="display: inline-block; vertical-align: middle;" class="pagedisplay"></span>
        <img src="<s:url value="/img/icons/arrow_right_green.png" />" class="next" style="vertical-align: middle; cursor: pointer;" alt="Next page">
        <img src="<s:url value="/img/icons/arrow_right_blue.png" />" class="last" style="vertical-align: middle; cursor: pointer;" alt="Last page">
        <select class="pagesize" style="display: inline-block; vertical-align: middle">
            <option selected="selected" value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </form>
</div>
